<script setup>
    import { ref } from 'vue'
    import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
    Message,
    } from '@element-plus/icons-vue'

    const chooseclass = ref([
        {courseName:'操作系统',teacherName:'黄老师',grade:'大一',courseTime:30,startTime:'2021-09-01',endTime:'2021-12-31'},
        {courseName:'机器学习',teacherName:'李老师',grade:'大二',courseTime:30,startTime:'2022-01-01',endTime:'2022-01-02'},
        {courseName:'计算机网络',teacherName:'王老师',grade:'大二',courseTime:30,startTime:'2021-09-01',endTime:'2021-12-31'}
    ])
    const subjects = ref("全部")

</script>
<template>
    <div>
        <el-tabs >
            <el-tab-pane label="我的信息" name="first">
                <el-descriptions class="margin-top"  :column="3" :size="size" border>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            用户名
                            </div>
                        </template>
                            学生
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon :style="iconStyle">
                                    <User />
                                </el-icon>
                                昵称
                            </div>
                        </template>
                        张三
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon :style="iconStyle">
                                    <Female />
                                </el-icon>
                                性别
                            </div>
                        </template>
                        女
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone />
                            </el-icon>
                            手机号
                            </div>
                        </template>
                            18100000000
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Message />
                            </el-icon>
                            邮箱
                            </div>
                        </template>
                            3304271595@qq.com
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <location />
                            </el-icon>
                            家庭住址
                            </div>
                        </template>
                        辽宁省沈阳市浑南区金科街7-3号
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            备注
                            </div>
                        </template>
                        <el-tag size="small">学校</el-tag>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <office-building />
                            </el-icon>
                            地址
                            </div>
                        </template>
                        辽宁省锦州市
                    </el-descriptions-item>
                    
                </el-descriptions>
                <template class="footer">
                    <el-button type="primary">修改</el-button>
                </template>
                
            </el-tab-pane>

            <el-tab-pane label="选课中心" name="secound">
                <div>
                    <el-select v-model="subjects" placeholder="课程" style="width: 140px">
                        <el-option label="全部" value="1" />
                        <el-option label="管理科学技术" value="2" />
                        <el-option label="数学" value="3" />
                        <el-option label="建筑学" value="4" />
                        <el-option label="物理学" value="5" />
                        <el-option label="机械工程" value="6" />
                        <el-option label="计算机科学与技术" value="7" />
                        <el-option label="化学" value="8" />
                        <el-option label="医学" value="9" />
                        <el-option label="电气工程" value="10" />
                        <el-option label="材料科学技术" value="11" />
                    </el-select>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的选课" name="third">
                <el-table :data="chooseclass">
                    <el-table-column label="课程名称" prop="courseName"/>
                    <el-table-column label="课程讲师" prop="teacherName"/>
                    <el-table-column label="课程年级" prop="grade"/>
                    <el-table-column label="课时" prop="courseTime"/>
                    <el-table-column label="开课时间" prop="startTime"/>
                    <el-table-column label="结课时间" prop="endTime"/>
                    <el-table-column label="操作" width="100px">
                        <el-button type="text">查看</el-button>
                        <el-img ref=""></el-img>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style scoped lang="scss">
    .footer {
        margin-top: 20px;
        align-items: center;
        display: flex;
        justify-content: center;
    }
</style>